<template>
    <a-row :gutter="[8, 8]">
        <a-col :span="12">
            <slot name="toolbar">
                <a-space>
                    <a-button
                        v-for="item in toolbar"
                        :key="item.id"
                        @click="item.onClick"
                    >
                        {{ item.label }}
                    </a-button>
                </a-space>
            </slot>
        </a-col>
        <a-col :span="12" style="text-align: right">
            <slot name="toolkit">
                <a-button
                    v-for="item in toolkit"
                    :key="item.id"
                    @click="item.onClick"
                >
                    {{ item.label }}
                </a-button>
            </slot>
        </a-col>
        <a-col :span="24">
            <a-table
			size="small"
                v-bind="{ attrs }"
                :columns="columns"
                :dataSource="dataSource"
            >
                <template #bodyCell="{ column, record, index, text }">
                    <slot
                        name="bodyCell"
                        :column="column"
                        :record="record"
                        :index="index"
                        :text="text"
                    >
                        <template v-if="column.key == 'action'">
                            <a-space>
                                <a
                                    v-for="a in attrs.action"
                                    :key="a.id"
                                    v-bind="a.attrs"
                                    @click="$emit(a.event, { record, index })"
                                >
                                    {{ a.label }}
                                </a>
                            </a-space>
                        </template>
                    </slot>
                </template>
            </a-table>
        </a-col>
    </a-row>
</template>

<script lang="ts">
import { defineComponent, PropType } from "vue";
import { TableColumnsType } from "ant-design-vue";

export default defineComponent({
    props: {
        toolbar: Array,
        toolkit: Array,
        columns: {
            type: Array as PropType<TableColumnsType>,
        },
        dataSource: {
            type: Array,
            required: true,
        },
        size: {
            type: String,
            default: "middle",
        },
    },
    setup(props, { attrs }: { attrs: any }) {
        return {
            attrs,
        };
    },
});
</script>
